<template>
    <view class="caption">
        <text class="text">猜你喜欢</text>
    </view>

    <view class="guess">
        <navigator class="guess-item" v-for="item in goodsGuessList" :key="item.goods_id"
            :url="`/pagesGoods/goods_detail/goods_detail?id=${item.goods_id}`">

            <!-- #ifdef MP-WEIXIN -->
            <image class="image" mode="aspectFill" :src="global.FILE_DOMAIN + item.cover_url" />
            <!-- #endif -->

            <view class="name ellipsis">{{ item.goods_name }}</view>
            <view class="price">
                <text class="small">¥</text>
                <text>{{ (item.price / 100).toFixed(2) }}</text>
            </view>
        </navigator>
    </view>
</template>

<script setup lang="ts">
import { ref, onMounted, inject } from 'vue'
import { reqGetHomeGoodsGuessAPI } from "@/apis/home";
import type { GoodsItem } from '@/types/goods';

// 全局属性
const global: any = inject('global')

// 猜你喜欢商品
const goodsGuessList = ref<GoodsItem[]>([])

// 页码
const page = ref<number>(1)

// 条数
const pageSize = ref(10)

// 完成标识
const finish = ref(false)

onMounted(() => {
    getHomeGoodsGuess()
})

// 获取推荐
const getHomeGoodsGuess = async () => {
    if (finish.value == true) {
        return
    }
    const result = await reqGetHomeGoodsGuessAPI(page.value, pageSize.value)
    const goods: any = result.data.goods != null ? result.data.goods : []
    goodsGuessList.value.push(...goods)
    if (page.value < result.data.page_total) {
        page.value++
    } else {
        finish.value = true
    }
}

// 重置数据
const resetData = () => {
    page.value = 1
    goodsGuessList.value = []
    finish.value = false
}

// 导出
defineExpose({
    getHomeGoodsGuess,
    resetData
})
</script>

<style lang="scss">
:host {
    display: block;
}

// 分类标题
.caption {
    display: flex;
    justify-content: center;
    padding: 36rpx 0 40rpx;
    font-size: 32rpx;
    color: #262626;

    .text {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 28rpx 0 30rpx;

        &::before,
        &::after {
            content: '';
            width: 20rpx;
            height: 20rpx;
            background-image: url(@/static/images/bubble.png);
            background-size: contain;
            margin: 0 10rpx;
        }
    }
}

// 猜你喜欢
.guess {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    padding: 0 20rpx;

    .guess-item {
        width: 345rpx;
        padding: 24rpx 20rpx 20rpx;
        margin-bottom: 20rpx;
        border-radius: 10rpx;
        background-color: #fff;

        .image {
            width: 304rpx;
            height: 304rpx;
        }

        .name {
            height: 70rpx;
            margin: 10rpx 0;
            font-size: 26rpx;
            color: #262626;
        }

        .price {
            padding-top: 4rpx;
            color: #cf4444;
            font-size: 26rpx;

            .small {
                font-size: 80%;
            }
        }
    }
}

// 加载提示文字
.loading-text {
    text-align: center;
    font-size: 28rpx;
    color: #666;
    padding: 20rpx 0;
}
</style>